import React, { useEffect, useState, Component, useRef } from 'react';
import { fetchSync, request } from '@/utils/request';
import { history, Link } from 'umi';
import { connect, router } from 'dva';

import enUS from 'antd/es/locale/en_US';
import {
    Menu, Switch, Divider, Checkbox, Button, Row, Col, Tooltip, notification, Skeleton, Avatar, Carousel,
    Form, Modal, Select, Tree, Icon, Radio, Table, Tag, Pagination, Input, Space, message, Card, Tabs, Collapse, Image, ConfigProvider
} from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined, AudioOutlined, UserOutlined, ArrowRightOutlined, ArrowLeftOutlined } from '@ant-design/icons';

import 'mapbox-gl/dist/mapbox-gl.css';
import styles from './home.less';
import ItemActivity from './itemActivity';
import moment from 'moment';

let activities = [
    {
        name: '',
        desc: "",
        image: require('./img/activities/1.jpg'),
    },
    {
        name: 'Snow Bike Cycling Race',
        desc: '',
        image: require('./img/activities/2.jpeg'),
    },
    {
        name: 'Winter Cup',
        desc: '',
        image: require('./img/activities/3.png'),
    },
    {
        name: '',
        desc: '',
        image: require('./img/activities/4.jpeg'),
    },
    {
        name: '',
        desc: '',
        image: require('./img/activities/5.jpg'),
    }
];

const contentStyle = {
    height: '200px',
    color: '#fff',
    lineHeight: '200px',
    textAlign: 'center',
    backgroundSize:'100% 100%',
    backgroundRepeat: 'no-repeat',

};
export default (props) => {
    const [selectCost, setSelectCost] = useState(null);
    const [feature, setFeature] = useState({});
    const showmapContainer = useRef(null);
    const echarts8 = useRef(null);
    const commentList = useRef(null);

    const [activities, setActivities] = useState([])

    const [nowTime, setNowTime] = useState()

    const [selectQiangxianItem, setSelectQiangxianItem] = useState({ people: 0 })

    //初始函数
    useEffect(async () => {
        //此处编写 组件挂载之后和组件重新渲染之后执行的代码
        // qu_data = await fetchSync('/api/fangxun/qu/findAll')
        initActivities()

        return () => {
            //此处编写 组件即将被卸载前执行的代码
        }
        // 4、若传值，但是传的是空数组 []，则表示该useEffect里的内容仅会在“挂载完成后和组件即将被卸载前”执行一次；
    }, [])

    const goToDetails = (item) => {
        console.log(item)
        history.push({
            pathname: '/runjoy/activityDetail',
            search:'?id='+ item.id
        })
    }

    const initActivities = ()=>{
        request('/api/joy/activity/findAll', {
            method: 'get'
        }).then(res=>{
            console.log(res)
            if (res.success) {
                //  sort by time desc
                let data = res.data.sort((a,b)=>  moment(b.activityTime) - moment(a.activityTime)) 
                setActivities(data)
            }
        })
    }

    return (
        <div className={styles.container} locale={enUS} >
            <Divider style={{color:'#ddd'}} orientation="left">Best Activities</Divider>
                <Carousel autoplay>
                    {
                        activities.sort((a,b)=> {
                            let aa = a.userNames?.length || 0;
                            let bb =  b.userNames?.length || 0;
                            return aa - bb
                        }).slice(0,5).map((item, index)=>{
                            return <div key={index} onClick={()=>goToDetails(item)}>
                                {/* <h3 style={{...contentStyle, backgroundImage:`url(${item.image})`}} >{item.name}</h3> */}
                                <h3 style={{...contentStyle, backgroundImage:`url(${item.base64Images[0]})`}} ></h3>
                            </div>
                        })
                    }
                </Carousel>
            
            {/* <Card bordered={false}>
                <div className={styles.cardPanel}>
                    <div className={styles.desc}>
                        <label>Weekly Card</label>
                        <span>Expired on October 23, 2024</span>
                    </div>
                    <div className={styles.remain}>
                        <b>2</b> day remaining
                    </div>
                </div>
            </Card> */}
            {/* <Divider style={{color:'#ddd'}} orientation="left" ></Divider> */}
            < br />
            <Card title="Recent Activities" bordered={false} extra={<Link to="/runjoy/moreActivities"><a>More</a></Link>}
            bodyStyle={{padding:0}}
            >
                <ItemActivity data={activities.slice(0,10)}></ItemActivity>
            </Card>
        </div>
    );
}
